{extend name='index/index'}

{block name='main'}
<div class="tpl-content-wrapper">
    <div class="tpl-content-page-title">
        Amaze UI 表单
    </div>
    <ol class="am-breadcrumb">
        <li><a href="#" class="am-icon-home">首页</a></li>
        <li><a href="#">表单</a></li>
        <li class="am-active">Amaze UI 表单</li>
    </ol>
    <div class="tpl-portlet-components">
        <div class="portlet-title">
            <div class="caption font-green bold">
                <span class="am-icon-code"></span> 表单
            </div>
            <div class="tpl-portlet-input tpl-fz-ml">
                <div class="portlet-input input-small input-inline">
                    <div class="input-icon right">
                        <i class="am-icon-search"></i>
                        <input type="text" class="form-control form-control-solid" placeholder="搜索..."></div>
                </div>
            </div>


        </div>
        <div class="tpl-block ">

            <div class="am-g tpl-amazeui-form">


                <div class="am-u-sm-12 am-u-md-9">
                    <form class="am-form am-form-horizontal" action="{:url('admin/manager/save')}" method="post">
                        {:token()}

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">姓名 / Name</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="user-name" name="name" placeholder="姓名 / Name">
                                <small>中文、英文、数字包括下划线 6-16位</small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-password" class="am-u-sm-3 am-form-label">密码 / Password</label>
                            <div class="am-u-sm-9">
                                <input type="password" id="user-password" name="pass" placeholder="输入你的密码 / Password">
                                <small>密码由数字、26个英文字母或者下划线组成的字符串...</small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-repassword" class="am-u-sm-3 am-form-label">密码 / rePassword</label>
                            <div class="am-u-sm-9">
                                <input type="password" id="user-repassword" name="repass"
                                       placeholder="输入你的密码 / rePassword">
                                <small>确认密码由数字、26个英文字母或者下划线组成的字符串...</small>
                            </div>
                        </div>

                        <!--<div class="am-form-group">-->
                        <!--<label for="user-phone" class="am-u-sm-3 am-form-label">电话 / Telephone</label>-->
                        <!--<div class="am-u-sm-9">-->
                        <!--<input type="tel" id="user-phone" placeholder="输入你的电话号码 / Telephone">-->
                        <!--</div>-->
                        <!--</div>-->

                        <div class="am-form-group">
                            <label for="user-QQ" class="am-u-sm-3 am-form-label">状态 / status </label>
                            <div class="am-u-sm-9">
                                <select name="status" id="">
                                    <option value="1" checked>普通管理员</option>
                                    <option value="0">超级管理员</option>
                                </select>
                            </div>
                        </div>

                        <!--<div class="am-form-group">-->
                        <!--<label for="user-weibo" class="am-u-sm-3 am-form-label">微博 / Twitter</label>-->
                        <!--<div class="am-u-sm-9">-->
                        <!--<input type="text" id="user-weibo" placeholder="输入你的微博 / Twitter">-->
                        <!--</div>-->
                        <!--</div>-->

                        <!--<div class="am-form-group">-->
                        <!--<label for="user-intro" class="am-u-sm-3 am-form-label">简介 / Intro</label>-->
                        <!--<div class="am-u-sm-9">-->
                        <!--<textarea class="" rows="5" id="user-intro" placeholder="输入个人简介"></textarea>-->
                        <!--<small>250字以内写出你的一生...</small>-->
                        <!--</div>-->
                        <!--</div>-->

                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button type="submit" class="am-btn am-btn-primary">确认添加</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>


</div>

</div>
{/block}

{block name='myjs'}
<script>

    if (document.all){
        // 验证用户名
        $('input[name="name"]')[0].onpropertychange = regexName;
        // 验证密码
        $('input[name="pass"]')[0].onpropertychange = regexPass;

    }else{
        // 验证用户名
        $('input[name="name"]')[0].oninput = regexName;
        // 验证密码
        $('input[name="pass"]')[0].oninput = regexPass;
        // 确认密码
        $('input[name="repass"]')[0].oninput = regexRepass;
    }

    // 确认密码
    function regexRepass() {
        var repass = $(this).val();
        var pass = $('input[name="pass"]').val();

        if ( repass === pass ) {
            $(this).next('small').html("密码正确").css('color', 'green');
        }else{
            $(this).next('small').html('密码错误,由数字、26个英文字母或者下划线组成的字符串').css('color', '#f00');
        }


    }

    // 验证用户密码
    function regexPass() {
        var str = $(this).val();

        if (/^\w{6,16}$/.test(str)) {
            $(this).next('small').css('color', 'green');
        }else{
            $(this).next('small').css('color', '#f00');
        }

    }

    // 验证用户名
    function regexName() {
        var str = $(this).val();

        if (/^[\u4E00-\u9FA5A-Za-z0-9]{2,16}$/.test(str)) {
            $(this).next('small').css('color','green');
        }else{
            $(this).next('small').css('color','#f00');

        }
    }






</script>
{/block}